<template>
    <div id="app">
        <Add />
        <to-do-list @add-list="addList"/>
            <div class="box">
                <ul v-for="(newStu,index) in listData" :key="index">
                    <li>{{index+1}} -- {{newStu}}</li>
                </ul>
            </div>
        <div class="card" v-for="item in stuData" :key="item.name">
            <Card :student="item"/>
        </div>
    </div>
</template>
<script>
import {ref} from 'vue'
import '../../assets/css/report.css'
//1
import Card from "./components/Card.vue"
import Add from "./components/Add.vue"

export default {
    components:{Card,Add},//2
    setup(){
        const newStu=ref( {
            name: '', 
            age: 0, 
            gender: '',
            head: '', 
            yw: 0, 
            sx: 0, 
            yy: 0, 
            show: false 
        });
        const stuData= [
            {
              name: '张三',
              age: 20,
              gender: '男',
              head: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_360_360%2Fc8%2F5d%2F59%2Fc85d595ed206fa63bb7bc7d7d9d17353.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648255399&t=0999eef6cf2f4a0da0f06a37153f3a30',
              yw: 60,
              sx: 100,
              yy: 70,
            },
            {
              name: '李四',
              age: 20,
              gender: '男',
              head: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F36%2Faf%2F84%2F36af84b51d35d4e560fb92fa065fe1d6.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648255399&t=d24abc41a0a5bc533cf0d8e42257a3c1',
              yw: 50,
              sx: 100,
              yy: 40,
            },
            {
              name: '王五',
              age: 20,
              gender: '男',
              head: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F22%2Fa6%2F5d%2F83%2Fae689318a827319a98788026bb32d99a.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648255399&t=b85a8b7e9a853d96055aab2182fd4379',
              yw: 80,
              sx: 100,
              yy: 60,
            },
        ];  
        const listData=ref([]);
        const addList=()=> {
            if ((this.newStu.value.name === '') | (!this.newStu.value.gender === '')) {
                alert('请填写完整！');
                return;
            }
            listData.value.push(value);
        };
        // //添加数据
        // const addList=()=>{
        //     listData.value.push(this.newStu.value);
        // }
        return{
            stuData,
            newStu,
            listData,
            addList
        };
    } 
};
</script>

